<template>
<!--项目方选择公司生成生活费单-->
  <div class="list-container">
    <el-form class="search-panel" v-model="formData" :inline="true">
      <!-- <el-form-item label-width="120px" class="search-input" label="劳务公司名称：" prop="name" >
        <el-input v-model="formData.name" placeholder="劳务公司名称"></el-input>
      </el-form-item> -->
      <el-form-item class="search-time" label="考勤时间：" prop="time">
        <el-date-picker
          style="width:250px"
          v-model="formData.date"
          type="month"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <!-- <el-row class="table-operate">
        <el-button type="primary" icon="el-icon-plus" @click="grant"> 发放工资单 </el-button>
        <el-button type="primary" @click="check"> 查看进度 </el-button>
      </el-row> -->
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        >
        <!-- <el-table-column type="selection" width="45" align="center">
        </el-table-column> -->
        <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="70"
            align="center"
            >
        </el-table-column>
        <el-table-column
            prop="serviceCorporationName"
            label="劳务公司名称"
            min-width="180"
            align="center"
            >
        </el-table-column>
        <el-table-column
            prop="attendanceNum"
            label="月工资单已确认人数"
            align="center"
            min-width="120"
            >
        </el-table-column>
        <el-table-column min-width="130" prop="actualMonthlyWage" label="实际工资合计" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.actualMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="shouldIssuedMonthlyWage" label="请款金额" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.shouldIssuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column min-width="130" prop="issuedMonthlyWage" label="已发放金额" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.issuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="unissuedMonthlyWage" label="剩余金额" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.unissuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="status" label="发放状态" align="center">
        </el-table-column>
        <el-table-column min-width="180" prop="operation" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-search"
              @click.native.prevent="checkRow(scope)"
            >查看</el-button
            >
            <el-button
              @click.native.prevent="confirmRow(scope)"
              type="text"
              icon="el-icon-circle-check"
              :disabled="scope.row.status=='未发放'||scope.row.status=='已驳回'?false:true"
            >提交确认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
            共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
        </div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import {generateCorporationList} from'@/api/wage.js'
import workflowApi from '@/api/workflow/workFlow'
export default {
  data(){
    return{
      formData:{
        name:'',
        date:this.$route.query.date,
      },
      tableData:[],               //表格数据
      total:0,                  //数据总条数
      currentPage:1,             //当前页码
      pageSize:10,    //每页显示条目个数
      loading:false,
      projectId:2,
      affairsApplyWorkflowProjectList:[],
      workflowType : '劳务代发审批',
      workflowId : null,
      status:0
    }
  },
  async created(){
    this.getWorkflowId()
    await this.getProjectApplyList();
    await this.getList();
  },
  methods:{
    getWorkflowId(){

      // workflowApi.getWorkflowId(this.workflowType).then(res=>{

      //   this.workflowId = res.data.workflowId
      // })
      workflowApi.getWorkflowList(this.workflowType).then(res => {
        this.workflowId = res.data.workflows[0].workflowId
      })
    },
    async getProjectApplyList(){
      await workflowApi.getProjectApplyList().then(res=>{
        this.affairsApplyWorkflowProjectList = res.data.affairsApplyWorkflowProjectList
      })
    },
    grant(){
      console.log('grant');
    },
    // check(){
    //   this.$router.push({path:'/agency/distributionDetails',query:{date:this.formData.date}})
    // },
    handleSelectionChange(res) {
      this.selectedList = res;
    //   console.log(res)
      this.$emit("getData",res)
    },
    getList(){
      const data = {
        currentPage:this.currentPage,
        date:this.formData.date,
        pageSize:this.pageSize,
        status:this.status
      }
      generateCorporationList(data).then(res=>{
        this.tableData = res.data.data.records
        var that = this
        this.tableData.forEach(function (item,index){
          var hasMonth = false
          that.affairsApplyWorkflowProjectList.forEach(function (company){
            if(that.formData.date === company.applyWageMonth.slice(0,7) && item.serviceCorporationName === company.companyName){
              hasMonth = true
              item.status = that.convertStatus(company.affairsApplyWorkflowStatus)
              item.workflowApplyId = company.affairsApplyWorkflowId
            }
          })
          if(!hasMonth){
            item.status='未发放'
          }
        })
        this.total=res.data.data.total
      }).catch(res=>{
        console.log(res);
      })
    },
    onSubmit(){
      this.getList()
    },
    //分页
    handleSizeChange(val){
      this.pageSize=val
      this.getList()
    },
    //currentPage当前页改变时
    handleCurrentChange(val) {
      this.currentPage=val
      this.getList()
    },
    // 查看
    checkRow(res) {
      this.$router.push({path:'/agency/issuanceRecord',query:{workflowApplyId:res.row.workflowApplyId,date:this.formData.date,personIds:res.row.personIds}})
    },
    convertStatus(status){
      let newStatus = "未知"
      switch (status){
        case '1': newStatus = "待审核";break;
        case '2': newStatus = "审核中";break;
        case '3': newStatus = "已审核";break;
        case '4': newStatus = "已驳回";break;
        case '5': newStatus = "已撤回";break;
      }
      return newStatus
    },
    confirmRow(res) {
      // affairsApplyWorkflowVo.workflowId = "1430015104914116608"
      if(this.workflowId === null){
        this.$message({
          message: '无劳务代发审批流程，请先联系管理员定义相关流程',
          type: 'warning'
        });
        //无劳务代发审批流程 请先联系管理员定义 相关流程
      }else {
        var affairsApplyWorkflowVo = {}
        affairsApplyWorkflowVo.companyId=res.row.serviceCorporationId
        affairsApplyWorkflowVo.workflowId = this.workflowId
        affairsApplyWorkflowVo.personIds = this.tableData[0].personIds
        affairsApplyWorkflowVo.examineIds = [
          {
            "attendanceTime"                : this.formData.date,
            "serviceCorporationName"        : res.row.serviceCorporationName,
            "attendanceNum"                 : res.row.attendanceNum,
            "actualMonthlyWage"             : res.row.actualMonthlyWage,
            "shouldIssuedMonthlyWage"       : res.row.shouldIssuedMonthlyWage,
            "issuedMonthlyWage"             : res.row.issuedMonthlyWage,
            "unissuedMonthlyWage"           : res.row.unissuedMonthlyWage
          }
        ]
        this.$confirm(
          "是否确认" + res.row.serviceCorporationName + "的工资表，确认提交后将交由该劳务公司主管审核！",
          "劳务代发审核",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          workflowApi.applyWorkflowApply(affairsApplyWorkflowVo).then(res=>{
            this.$message({
              type: "success",
              message: "发放工资单提交成功!",
            });
            this.$router.push("/agency/record");
          }).catch((res)=>{
            this.$message({
              type: "info",
              message: res,
            });
          })
        })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消确认",
            });
          });
      }

    },
  }
}
</script>

<style scoped lang="scss">
</style>
